<template>
    <div class="test-container">
        <h2>权限测试页面</h2>
        <el-divider/>
        
        <!-- 调试信息区域 -->
        <el-card class="mb-3">
            <template #header>
                <div class="card-header">
                    <span>调试信息</span>
                </div>
            </template>
            
            <h3>当前用户：</h3>
            <el-descriptions :column="2" border>
                <el-descriptions-item label="用户名">{{ currentUser.username }}</el-descriptions-item>
                <el-descriptions-item label="是否超箧">
                    <el-tag :type="currentUser.is_superuser ? 'success' : 'info'">
                        {{ currentUser.is_superuser ? '是' : '否' }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="邮箱">{{ currentUser.email }}</el-descriptions-item>
                <el-descriptions-item label="角色">{{ currentUser.roles }}</el-descriptions-item>
            </el-descriptions>
            
            <el-divider/>
            
            <h3>当前用户权限列表：</h3>
            <div v-if="permissions.length > 0">
                <el-tag 
                    v-for="(perm, index) in permissions" 
                    :key="index" 
                    class="mr-2 mb-2"
                    type="success"
                >
                    {{ perm }}
                </el-tag>
            </div>
            <el-empty v-else description="没有任何权限" :image-size="80" />
            
            <el-divider/>
            
            <h3>权限测试结果（使用 hasPermission 函数）：</h3>
            <el-table :data="permissionTestData" border style="width: 100%">
                <el-table-column prop="permission" label="权限标识" width="200" />
                <el-table-column prop="hasPermission" label="是否拥有" align="center">
                    <template #default="scope">
                        <el-tag :type="scope.row.hasPermission ? 'success' : 'danger'">
                            {{ scope.row.hasPermission ? '✔ 有权限' : '✖ 无权限' }}
                        </el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        
        <el-divider/>
        
        <!-- 权限按钮测试区域 -->
        <h3>权限按钮示例（使用 v-hasPerms 指令）：</h3>
        <el-space wrap>
            <el-button v-hasPerms="'sys:test:edit'" type="primary">测试编辑</el-button>
            <el-button v-hasPerms="'sys:test:delete'" type="success">测试删除</el-button>
            <el-button v-hasPerms="'sys:user:add'" type="success">用户新增</el-button>
            <el-button v-hasPerms="'sys:role:grant'" type="warning">分配权限</el-button>
            <el-button v-hasPerms="['sys:user:edit', 'sys:user:delete']" type="danger">多权限按钮</el-button>
        </el-space>
        
        <el-divider/>
        
        <h3>无权限控制的按钮（总是显示）：</h3>
        <el-button type="info">普通按钮</el-button>
        
        <el-divider/>
        
        <el-alert
            title="提示"
            type="info"
            description="请打开浏览器控制台（F12）查看详细的权限判断日志"
            :closable="false"
        />
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { hasPermission } from '@/directives/permission'

const currentUser = ref({})
const permissions = ref([])
const permissionTestData = ref([])

onMounted(() => {
    // 获取当前用户信息
    const userStr = window.sessionStorage.getItem('currentUser')
    if (userStr) {
        currentUser.value = JSON.parse(userStr)
    }
    
    // 获取当前用户的权限列表
    const permStr = window.sessionStorage.getItem('permissions')
    if (permStr) {
        permissions.value = JSON.parse(permStr)
    }
    
    // 测试多个权限
    const testPermissions = [
        'sys:test:edit',
        'sys:user:add',
        'sys:user:edit',
        'sys:user:delete',
        'sys:role:grant',
        'sys:role:edit',
        'sys:role:delete'
    ]
    
    permissionTestData.value = testPermissions.map(perm => ({
        permission: perm,
        hasPermission: hasPermission(perm)
    }))
    
    // 打印到控制台
    console.log('='.repeat(60))
    console.log('【测试页面】当前用户信息:', currentUser.value)
    console.log('【测试页面】当前用户权限列表:', permissions.value)
    console.log('【测试页面】权限测试结果:', permissionTestData.value)
    console.log('='.repeat(60))
})
</script>

<style scoped>
.test-container {
    padding: 20px;
}

.mb-3 {
    margin-bottom: 20px;
}

.mr-2 {
    margin-right: 8px;
}

.mb-2 {
    margin-bottom: 8px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>
